<template>
    <div>

        <el-upload :ref="ref" :disabled="disabled" :action="url" :data="{bizId,bizType}" :on-remove="handleRemove" :file-list="fileList" :headers="headers" :on-preview="handlePictureCardPreview" list-type="picture-card" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess">

            <span slot="default" class="default-img">
                <i class="el-icon-camera"></i>
                <span>上传图片</span>
            </span>
        </el-upload>
       <div class="el-upload__tip" slot="tip" v-html="$t('public.uploadTips',[fileSize,fileType.join('/')])"></div>
        <el-dialog :visible.sync="dialogVisible" center append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { previewFile } from '@/utils/index'
import { deleteFile } from '@/api/file/file'

export default {
    name: 'file-upload-input',
    props: {
        // 值  {id,fileName,fileType,filePath }
        value: {
            type: Object,
            default: undefined,
        },
        otherList: {
            type: Array,
            default: undefined,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        bizId: { type: [String, Number], default: '' },
        bizType: {
            type: String,
            default: 'UPLOAD_FILE',
        },
    },
    data() {
        return {
            fileName: '',
            loading: false,
            filePre: ['pdf', 'ppt'],
            ref: new Date().getTime(),
            imgSuf: ['png', 'jpg', 'jepg', 'gif', 'svg'],
            // url: process.env.VUE_APP_DCC_API  + '/v1/oss/file/upload',
            url: process.env.VUE_APP_BASE_API + '/file/file/upload',
            headers: { Authorization: 'Bearer ' + getToken() },
            fileList: [],
            imgs: [],
            dialogImageUrl: '',
            dialogVisible: false,
        }
    },
    watch: {
        otherList: {
            handler(val) {
                let fileList = [...val]
                fileList.forEach((io) => {
                    io.name = io.originalFileName
                })
                this.fileList = fileList
                console.log('watch===>', val)
            },
        },
    },
    methods: {
        handleBeforeUpload(file) {
            this.fileName = file.name
            const imgs = [
                'image/jpeg',
                'image/jpg',
                'image/png',
                'image/gif',
                'image/svg',
            ]
            const isImg = imgs.includes(file.type)
            const isLt2M = file.size / 1024 / 1024 < 5

            if (!isImg) {
                this.$message.error('上传图片格式错误!')
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 5MB!')
            }
            return isLt2M && isImg
        },
        handleUploadSuccess(res, file, fileList) {
            this.imgs = fileList
            if (res.code == 200) {
                console.log(fileList)
                const { fileName } = this
                this.$emit('input', { ...res.data, fileName })
                this.$emit('change', fileList)
                this.$parent.$emit('el.form.change')
            }
        },
        handlePreview() {
            previewFile(this.value.id, this)
        },
        handleRemove(file, fileList) {
            this.imgs = fileList
            let removeId = file.response ? file.response.data.id : file.id
            deleteFile(removeId).then((res) => {})
            this.$emit('change', fileList)
        },
        handlePictureCardPreview(e) {
            const url = e.url || e.response.data.url
            this.dialogImageUrl = url
            this.dialogVisible = true
        },
    },
}
</script>

<style scoped>
.is-error .el-input__inner {
    border-color: red !important;
}
.is-error .el-input-group__append {
    border-color: red !important;
}
.icon-remove {
    margin-left: 6px;
    vertical-align: -2px;
}
.is-error .el-button {
    border-color: red !important;
}

.default-img {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.default-img i {
    font-size: 20px;
}
.default-img span {
    margin-top: 5px;
    line-height: 1em;
    font-size: 12px;
}
::v-deep .el-upload--picture-card {
    width: 68px;
    height: 68px;
}

::v-deep .el-upload:hover .default-img i {
    color: rgb(32, 160, 255);
}

::v-deep .el-upload-list__item {
    width: 88px;
    height: 88px;
    border-radius: 0;
}

.el-upload_body {
    width: 88px;
    height: 88px;
}

.upload-single ::v-deep .el-upload {
    display: none;
}

.el-upload-list__item-bottom-name {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 0;
    color: #333;
    background: white;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.el-upload-list--picture-card .el-upload-list__item-actions:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.el-upload-list--picture-card .el-upload-list__item-actions {
    font-size: 16px;
}
.el-upload-list--picture-card .el-upload-list__item-actions i {
    vertical-align: 8px;
}
.hover-background:hover {
    background: rgba(0, 0, 0, 0.5) !important;
}
::v-deep .el-upload-list__item.is-success:focus:not(:hover) {
    display: none !important;
}
</style>

